<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>权限管理</el-breadcrumb-item>
      <el-breadcrumb-item>角色列表</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow>
      <!-- 头部功能 -->
      <template #header>
        <div>
          <el-button type="primary" @click="showAddSortPage()"
            >添加角色</el-button
          >
          <el-dialog title="添加新角色" :visible.sync="addRolesVisible">
            <el-form :model="role" ref="rolesForm" :rules="$rules.role">
              <el-form-item
                prop="roleName"
                label="角色名称"
                :label-width="formLabelWidth"
              >
                <el-input v-model="role.roleName"> </el-input>
              </el-form-item>
              <el-form-item
                prop="roleDesc"
                label="角色描述"
                :label-width="formLabelWidth"
              >
                <el-input
                  v-model="role.roleDesc"
                  maxlength="20"
                  show-word-limit
                >
                </el-input>
              </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
              <el-button @click="addRolesVisible = false">取 消</el-button>
              <el-button type="primary" @click="addRoleList()">确 定</el-button>
            </div>
          </el-dialog>
        </div>
      </template>
      <!-- 正文内容 -->
      <el-table border :data="roles" v-loading="loading">
        <el-table-column type="expand" label="明细" width="50">
          <!-- slot-scope="props" -->
          <template>
            <el-form label-position="left" inline class="demo-table-expand">
              <div class="rolesDate">
                <el-form-item>
                  <el-tag closable> 商品管理 </el-tag>
                </el-form-item>
              </div>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="序号" width="50" type="index">
        </el-table-column>
        <el-table-column prop="roleName" label="角色名称"> </el-table-column>
        <el-table-column prop="roleDesc" label="角色描述"> </el-table-column>
        <el-table-column label="操作" width="300" #default="{ row }">
          <el-button
            type="primary"
            icon="el-icon-edit"
            size="mini"
            class="updateRole"
            @click="updateUserData(row)"
            >编辑</el-button
          >

          <el-button
            type="danger"
            icon="el-icon-delete"
            size="mini"
            @click="removeRolesrById(row.id)"
            >删除</el-button
          >
          <el-button
            type="warning"
            icon="el-icon-s-tools"
            size="mini"
            @click="showRoleLimit(row)"
            >分配权限</el-button
          >
        </el-table-column>
      </el-table>
    </el-card>
    <!-- 修改用户 -->
    <el-dialog title="修改用户" :visible.sync="updateRoleVisible">
      <el-form :model="role" ref="rolesForm" :rules="$rules.role">
        <el-form-item
          prop="roleName"
          label="角色名称"
          :label-width="formLabelWidth"
        >
          <el-input v-model="role.roleName" disabled> </el-input>
        </el-form-item>
        <el-form-item
          prop="roleDesc"
          label="角色描述"
          :label-width="formLabelWidth"
        >
          <el-input v-model="role.roleDesc"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifyRolesById()">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 分配权限 -->
    <el-dialog
      title="角色授权"
      :visible.sync="roleLimitVisible"
      refs="rightRoles"
    >
      <el-tree
        :data="limits"
        show-checkbox
        default-expand-all
        node-key="id"
        ref="tree"
        highlight-current
        :props="{ label: 'authName' }"
      >
      </el-tree>

      <div slot="footer" class="dialog-footer">
        <el-button @click="updateRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="updateRolesRight()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
export default {
  data() {
    return {
      roles: [],
      role: {
        id: "",
        roleName: "",
        roleDesc: "",
      },
      addRolesVisible: false,
      updateRoleVisible: false,
      roleLimitVisible: false,
      formLabelWidth: "100px",
      loading: false,
      limits: [],
    };
  },
  methods: {
    //刷新页面数据
    async initRolesList() {
      try {
        this.loading = true;
        let roles = await this.$api.getRolesList();
        this.roles = roles;
        if (roles == "error") return;
        console.log(222222, roles);
      } catch (error) {
        console.log("RoleView-initRolesList-error:", error);
      } finally {
        this.loading = false;
      }
    },
    //拿到权限的数据
    async initLimitsList() {
      try {
        this.loading = true;
        let data = await this.$api.getRightsList("tree");
        console.log(1111, data);
        this.limits = data;
      } catch (error) {
        console.log("RoleView-initLimitsList-error:", error);
      } finally {
        this.loading = false;
      }
    },
    //添加页面的展示和页面的清空
    showAddSortPage() {
      this.initRolesList();
      this.role = {
        roleName: "",
        roleDesc: '',
      };
      this.newSortArr = [];
      this.addRolesVisible  = true;
    },
    //添加角色
    async addRoleList() {
      try {
        //表单的清空????
        this.addRolesVisible = false;
        await this.$refs.rolesForm.validate(); //对$rolesForm(该表单的输入值)进行校验
        let data = await this.$api.addRoleList(this.role);
        console.log(111, data);
        if (data == "error") return;
        this.$message.success("添加成功");
        this.initRolesList();
      } catch (error) {
        console.log("RoleView-addRoleList-error:", error);
      }
    },
    //编辑角色信息
    async modifyRolesById() {
      let params = {
        roleName: this.role.roleName,
        roleDesc: this.role.roleDesc,
      };
      try {
        // console.log(11222, this.role);
        let data = await this.$api.updateRoleList(this.role.id, params);
        // console.log(12345, data);
        if (data == "error") return;
        this.$message.success("编辑成功");
        this.updateRoleVisible = false;
        this.initRolesList();
      } catch (error) {
        console.log("UserView-modifyUserById-error:", error);
      }
      console.log(11);
    },
    //拿到当前点击的按钮的角色id
    updateUserData(role) {
      this.role = {
        id: role.id,
        roleName: role.roleName,
        roleDesc: role.roleDesc,
      };
      this.updateRoleVisible = true;
    },
    //删除角色信息
    async removeRolesrById(id) {
      try {
        let data = this.$api.removeRoleList(id);
        // console.log(22, data);
        if (data == "error") return;
        this.$message.success("删除成功");
        this.initRolesList();
      } catch (error) {
        console.log("RoleView-removeRolesrById-error:", error);
      }
    },
    //展示权限列表对话框
    showRoleLimit(data) {
      this.roleLimitVisible = true;

      console.log(123, data);
    },
    //更新用户权限
    async updateRolesRight() {
      // let data = await this.$api;

      this.$notify = {
        title: "角色授权成功",
        message: "角色授权成功",
      };
      this.roleLimitVisible = false;

      //  console.log(123,data);
    },
  },
  created() {
    this.initRolesList();
    this.initLimitsList();
  },
};
</script>

 <style lang="less" scoped>
.el-button {
  margin: 0;
}
.el-button,
.updateRoles {
  margin-right: 10px;
}
.el-tree {
  border: 1px solid #ccc;
  border-radius: 5px;
}
// .el-tree-node__content {
//   border: 1px solid #ccc;
//   border-radius: 5px;
// }
// .el-tree-node__children {
//   border: 1px solid #ccc;
//   border-radius: 5px;
// }
// .el-tree-node {
//   border: 1px solid #ccc !important;
//   border-radius: 5px;
// }
</style>